<template>
  <div class="">
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img :src="item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="cc">
      <div class="w">
        <div class="shou">
          <h5>手机</h5>
        </div>
        <div class="zhong">
          <div>
            <img src="@/assets/icon/phone.png" alt="" />
          </div>
          <div>
            <ul class="uul">
              <li v-for="item in lists" :key="item.id" @click="tiao(item)">
                <img :src="item.product_picture" alt="" />
                <p>{{ item.product_name }}</p>
                <p class="pp">{{ item.product_title }}</p>
                <p class="pic">
                  {{ item.product_selling_price }}
                  <s>{{ item.product_price }}</s>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="shou">
          <h5>家电</h5>
        </div>
        <div class="zhong">
          <div class="sma">
            <img src="@/assets/icon/1.png" alt="" />
            <img src="@/assets/icon/2.png" alt="" />
          </div>
          <div>
            <ul class="uul">
              <li v-for="item in spor" :key="item.id" @click="tiao(item)">
                <img :src="item.product_picture" alt="" />
                <p>{{ item.product_name }}</p>
                <p class="pp">{{ item.product_title }}</p>
                <p class="pic">
                  {{ item.product_selling_price }}
                  <s>{{ item.product_price }}</s>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="shou">
          <h5>配件</h5>
        </div>
        <div class="zhong">
          <div class="sma">
            <img src="@/assets/icon/3.png" alt="" />
            <img src="@/assets/icon/4.png" alt="" />
          </div>
          <div>
            <ul class="uul">
              <li v-for="item in shop" :key="item.id" @click="tiao(item)">
                <img :src="item.product_picture" alt="" />
                <p>{{ item.product_name }}</p>
                <p class="pp">{{ item.product_title }}</p>
                <p class="pic">
                  {{ item.product_selling_price }}
                  <s>{{ item.product_price }}</s>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      lists: [],
      spor: [],
      shop: [],
    };
  },
  mounted() {
    this.$axios.post("/resources/carousel").then((res) => {
      // console.log(res);
      this.list = res.data.carousel;
    });
    this.getlist();
    this.$http("/product/getPromoProduct", "post", {
      categoryName: "电视机",
    }).then((res) => {
      console.log(res);
      this.spor = res.data.Product;
    });
    this.$http("/product/getPromoProduct", "post", {
      categoryName: "保护套",
    }).then((res) => {
      console.log(res);
      this.shop = res.data.Product;
    });
  },
  methods: {
    getlist() {
      this.$http("/product/getPromoProduct", "post", {
        categoryName: "手机",
      }).then((res) => {
        // console.log(res);
        this.lists = res.data.Product;
      });
    },
    tiao(item) {
      this.$router.push({ path: "/xiang", query: { obj: item } });
    },
  },
};
</script>

<style lang='scss'>
.block {
  width: 1200px;
  margin: auto;
  img {
    width: 100%;
  }
}
.cc {
  background-color: rgb(238, 235, 235);
  width: 100%;
}
.shou {
  font-size: 25px;
}
.zhong {
  display: flex;
}
.uul {
  // width: 100%;
  // display: flex;
  // flex-wrap: wrap;
  // overflow: hidden;
  display: block;
  list-style-type: disc;
  // margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  li {
    z-index: 1;
    float: left;
    width: 200px;
    height: 280px;
    padding: 10px 0;
    font-size: 16px;
    // margin: 0 0 14.5px 13.7px;
    text-align: center;
    background-color: #fff;
    -webkit-transition: all 0.2s linear;
    // transition: all 0.2s linear;
    position: relative;
    transition: all 0.4s;
    margin-left: 10px;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
}

ul {
  li {
    overflow: hidden;
    transition: all 0.4s;
  }
  li:hover {
    // background-color: red;
    transform: scale(1, 1);
    box-shadow: 10px 10px 10px gray;
  }
}

.pp {
  color: gray;
  font-size: 14px;
}
s {
  color: gray;
  font-size: 14px;
}
.pic {
  color: orangered;
}
.sma {
  display: flex;
  flex-direction: column;
}
</style>
